* {padding: 0;margin: 0;}
html,body {height: 100%}

div.test {
    width: 1rem /* 100/100 */;
    height: 1rem /* 100/100 */;
    background-color: red;
}

// body
body {
    display: flex;
    flex-direction: column;
    background: #000d4a url(../imgs/bg.jpg) center top;
}

// header
header {
    width: 100%;
    height: 105px;
    line-height: 105px;
    background: url(../imgs/head_bg.png) no-repeat center center;
    position: relative;
    text-align: center;
    color: #fff;

    // h1 
    h1 {
        font-size: .42rem /* 42/100 */;
    }

    span {
        font-size: .3rem /* 30/100 */;
        position: absolute;
        right: .2rem /* 20/100 */;
        top:-.1rem;
    }
}

// main
.main {
    flex:1;
    display: flex;
    justify-content: space-between;
    margin: .2rem /* 20/100 */;
    // background-color: red;

    .column {
        width: 30%;
        height: 100%;
        // background-color:green;
        
        // .column:nth-of-type(2)
        &:nth-of-type(2) {
            width: 40%;
            height: 100%;
            margin: 0 .2rem;
            // background-color: blue;
        }

        // box
        .box {
            width: 100%;
            background: rgba(0,0,0,.2);
            // background-color: yellow;
            margin-bottom: .15rem;
        }
    }
}